import React,{useState} from "react"
import { Layout,Menu,MenuProps} from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  ApartmentOutlined,
  FundOutlined ,
} from '@ant-design/icons';
import '../static/css/home.css'
import { Outlet,useNavigate } from "react-router";
const { Header, Sider, Content } = Layout;

const Index: React.FC<any> = (props: any): JSX.Element => {
    const navigate = useNavigate();
    const [collapsed, setCollapsed] = useState<boolean>(false);
    const items: MenuProps['items'] = [
        {
            label: '首页',
            key: '/index/',
            icon: <UserOutlined />,
        },
        {
            label: '访客记录', icon: <FundOutlined />, key: 'item-2', children: [
                { label: '访客列表', key: '/index/visitor' },
                { label: '访客添加修改', key: '/index/visitorAdd' }
            ]
        },
        {
            label: '部门管理', icon: <ApartmentOutlined />, key: 'item-3', children: [
                { label: '部门列表', key: '/index/department' },
                { label: '部门添加修改', key: '/index/departmentAdd' }
            ]
        },
        {
            label: '管理员',
            key: 'item-4',
            icon: <UserOutlined />,
            children: [
                { label: '管理员列表', key: '/index/administrator' },
                { label: '管理员添加修改', key: '/index/administratorAdd' }
            ],
        },
        {
            label: '核销人员管理',
            key: 'item-5',
            icon: <UserOutlined />,
            children: [
                { label: '核销人员列表', key: '/index/reviewer' },
                { label: '核销人员添加修改', key: '/index/reviewerAdd' },
                { label: '核销人员日志', key: '/index/reviewerLog' }
            ],
        },
        {
            label: '审核日志',
            key: 'item-6',
            icon: <UserOutlined />,
            children: [
                { label: '审核列表', key: '/index/auditlog' },
                // { label: '审核日志添加修改', key: '/index/auditlogAdd' }
            ],
        },
        {
            label: '校园动态',
            key: 'item-7',
            icon: <UserOutlined />,
            children: [
                { label: '校园动态列表', key: '/index/news' },
                { label: '校园动态添加修改', key: '/index/newsAdd' }
            ],
        },
        {
          label: '系统设置',
          key: '/index/system',
          icon: <UserOutlined />,
        },
    ]
    const onMenuClick: MenuProps['onClick']  = e => {
         navigate(e.key);
         console.log('click ', e.key);
       };
    return (
          <Layout style={{height:"100vh"}}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
      <Menu
          onClick={onMenuClick}
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={items}
        />
        
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
    )
}

export default Index